fillCanvas(context,"rgb(30, 30, 30)");


let rDirection = 1;
let rSpeed = 0;
let rw = 10;
let rh = 10;

// 限制物体运动的范围。
let restricted = setRestricted(canvas.width / 2 - 200, canvas.height / 2 - 150, 400, 300);

// 在限制范围内的点。


let anime_start;
let anime_stop = 0;
function animation(timestamp) {
    if (anime_start === undefined) anime_start = timestamp;
    const elapsed_time = timestamp - anime_start;
    // ***** 执行的动画 *****
    fillCanvas(context,"rgb(30, 30, 30)");
    context.strokeStyle = "rgb(100, 100, 100)";
    context.strokeRect(restricted.x1, restricted.y1,
        restricted.x2 - restricted.x1, restricted.y2 - restricted.y1);
    if (rSpeed < 5) {
        rSpeed = addition(rSpeed, 0.1);
    }
    if (rDirection === 1) {
        if (rx < restricted.x2 - rw - 1) {
            rx = addition(rx, rSpeed);
        } else {
            rDirection = -1;
            rSpeed = 0;
        }
    } else {
        if (rx > restricted.x1 + 1) {
            rx = addition(rx, -rSpeed);
        } else {
            rDirection = 1;
            rSpeed = 0;
        }
    }
    showWindow([restricted.x1, restricted.y1, restricted.x2, restricted.y2,rx,ry]);
    context.fillStyle = "white";
    context.fillRect(rx, ry, rw, rh);
    // ***** 执行的动画 *****
    if (anime_stop === 0) {
        window.requestAnimationFrame(animation);
    }else if (elapsed_time < anime_stop){ // 在多少 ms 后停止动画。
        window.requestAnimationFrame(animation);
    }
}

window.requestAnimationFrame(animation);


